<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>JSX</title>
  <script src="script/react.development.js"></script>
  <script src="script/react-dom.development.js"></script>
  <!-- 引入babel -->
  <script src="script/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <!--设置js代码被babel处理-->
  <script type="text/babel">

    // 创建一个React元素 <button>我是按钮</button>
    // 命令式编程
    // const button = React.createElement('button', {}, '我是按钮');

    // 声明式编程，结果导向的编程
    // 在React中可以通过JSX（JS扩展）（JavaScript Syntax Extension）来创建React元素，JSX需要被翻译为JS代码，才能被React执行
    // 要在React中使用JSX，必须引入babel来完成“翻译”工作
    // const button = <button>我是按钮</button>; // React.createElement('button', {}, '我是按钮');

    /*
    *   JSX就是React.createElement()的语法糖
    *       JSX在执行之前都会被babel转换为js代码
    * */
    /*     const div = <div>
          我是一个div
          <button>我是按钮</button>
        </div>; */






    /*
  *   JSX的注意事项
  *       1. JSX不是字符串，不要加引号
  *       2. JSX中html标签应该小写，React组件应该大写开头
  *       3. JSX中有且只有一个根标签
  *       4. JSX的标签必须正确结束（自结束标签必须写/）  <br> 必须写  <br/>         <input type="text" />
  *       5. 在JSX中可以使用{}嵌入表达式
  *              - 有值的语句的就是表达式
  *       6. 如果表达式是空值、布尔值、undefined，将不会显示
  *       7. 在JSX中，属性可以直接在标签中设置
  *           注意：
  *               class需要使用className代替
  *               style中必须使用对象设置
  *                   style={{background:'red'}}
  *
  * */

    function fn() {
      return 'hello';
    }

    const name = '孙悟空';

    const div = <div
      id="box" onClick={() => { alert('哈哈') }}
      className="box1"
      style={{ backgroundColor: "yellowgreen", border: '10px red solid' }}
    >
      我是一个div
      <ul>
        <li>列表项</li>
      </ul>

      <input type="text" />

      <div>
        {name} <br />
        {1 + 1} <br />
        {fn()} <br />
        {NaN} <br />
      </div>
    </div>;

    // alert(div);

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(div);

  </script>
</body>

</html>